<template>
  <div class="login_container w-100% h-100vh bg-cover bg-no-repeat">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24" v-show="is_login">
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForms"
          class="login_form"
          @keyup.enter="handle_login"
        >
          <!-- <img class="w-223px h-70px" src="@/assets/images/logo.jpg" alt="" /> -->
          <h1 class="text-white text-46px mb-30px letter">九鼎课堂</h1>

          <el-form-item prop="name">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.name"
              placeholder="请输入管理员用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :prefix-icon="Lock"
              type="password"
              :show-password="true"
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="w-49% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="handle_login"
            >
              登录
            </el-button>
            <!-- <el-button
              class="w-32% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="go_home"
            >
              返回首页
            </el-button> -->
            <el-button
              class="w-49% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="forget_password"
            >
              忘记密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" :xs="24" v-show="!is_login">
        <el-form
          :model="forgetForm"
          :rules="forget_rules"
          ref="forgetForms"
          class="login_form"
        >
          <h1 class="text-white text-40px">忘记密码</h1>
          <h2 class="text-white text-20px my-20px">欢迎来到后台管理系统</h2>
          <el-form-item prop="phone" label="手机号">
            <el-input v-model="forgetForm.phone"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="新密码">
            <el-input
              :prefix-icon="Lock"
              type="password"
              :show-password="true"
              v-model="forgetForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password2" label="确认新密码">
            <el-input
              :prefix-icon="Lock"
              type="password"
              :show-password="true"
              v-model="forgetForm.password2"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="手机验证码">
            <div class="flex flex-justify-between flex-items-center">
              <el-input
                v-model="forgetForm.code"
                placeholder="请输入验证码"
              ></el-input>
              <el-button
                type="warning"
                :loading="checkCodeBtn.loading"
                :disabled="checkCodeBtn.disabled"
                @click="getCheckCode"
                style="margin-left: 5px"
                class="bg-#1c39d1 border-color-#1c39d1 text-17px"
              >
                {{ checkCodeBtn.text }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item class="mt-30px">
            <el-button
              class="w-32% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="back_login"
            >
              返回登录页
            </el-button>
            <el-button
              class="w-32% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="submit"
            >
              提交
            </el-button>
            <el-button
              class="w-32% bg-#1c39d1 border-color-#1c39d1 text-17px"
              type="primary"
              size="default"
              @click="go_home"
            >
              返回首页
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import { getTime } from "@/utils/time";
import { login } from "@/api/index";
import { rules, forget_rules } from "./data.config";
import useUserStore from "@/store/modules/user";
// import { send_code } from "@/api/rights/index";
import { ElMessage } from "element-plus";
import { encrypt, decrypt } from "@/utils/index.ts";

let userStore = useUserStore();

let $router = useRouter();
const $route = useRoute();

let loginForm = reactive({
  name: "18818181818",
  password: "jdty@1234",
});

let forgetForm = reactive({
  phone: "",
  password: "",
  password2: "",
  code: "",
});
const forgetForms = ref();
const btnLoading = ref(false);
const loginForms = ref();
const is_login = ref(true);

let checkCodeBtn = reactive({
  text: "获取验证码",
  loading: false,
  disabled: false,
  duration: 10,
  timer: null,
});

const get_code = async () => {
  if (!forgetForm.phone) {
    ElMessage({
      message: "请填写手机号！",
      type: "error",
    });
  } else {
    const { data } = await send_code({ phone: forgetForm.phone });
  }
};

const getCheckCode = async () => {
  // 倒计时期间按钮不能单击
  if (!forgetForm.phone) {
    ElMessage({
      message: "请填写手机号！",
      type: "error",
    });
  } else {
    if (checkCodeBtn.duration !== 10) {
      checkCodeBtn.disabled = true;
    } else {
      // 清除掉定时器
      checkCodeBtn.timer && clearInterval(checkCodeBtn.timer);
      // 开启定时器
      const { data } = await send_code({ phone: forgetForm.phone });
      checkCodeBtn.timer = setInterval(() => {
        const tmp = checkCodeBtn.duration--;
        checkCodeBtn.text = `${tmp}秒`;
        if (tmp <= 0) {
          // 清除掉定时器
          clearInterval(checkCodeBtn.timer);
          checkCodeBtn.duration = 10;
          checkCodeBtn.text = "重新获取";
          // 设置按钮可以单击
          checkCodeBtn.disabled = false;
        }
      }, 1000);
    }
  }
};

const handle_forget = async () => {
  if (forgetForm.password !== forgetForm.password2) {
    ElMessage({
      message: "两次输入的密码不一致！",
      type: "error",
    });
  } else {
    const { code } = await change_password({
      phone: forgetForm.phone,
      password: forgetForm.password,
      code: forgetForm.code,
    });
    if (code === 200) {
      ElMessage({
        message: "操作成功！",
        type: "success",
      });
    } else {
      ElMessage({
        message: "操作失败！",
        type: "error",
      });
    }
  }
};
const submit = async () => {
  if (!forgetForms.value) return;
  await forgetForms.value.validate(async (valid, fields) => {
    if (valid) {
      handle_forget();
    } else {
      ElMessage({
        message: "填写错误！",
        type: "error",
      });
    }
  });
};

const back_login = () => {
  is_login.value = !is_login.value;
};

const forget_password = () => {
  is_login.value = !is_login.value;
};

const go_home = () => {
  $router.push("/");
};

const handle_login = async () => {
  const { code, message } = await login({
    // name: encrypt(loginForm.name),
    // password: encrypt(loginForm.password),
    name: loginForm.name,
    password: loginForm.password,
  });
  if (code === 200) {
    // await userStore.get_user_info();
    $router.push("/back");
    sessionStorage.setItem("is_back_login", "1");
    ElNotification.success("登录成功");
  } else {
    ElNotification.error(message);
  }
};
</script>

<style scoped lang="scss">
.letter {
  letter-spacing: 3px;
}
:deep .el-form-item__label {
  font-size: 18px;
  color: #fff;
  width: 120px;
}
.login_container {
  // background: url("@/assets/images/login_bg.jpg") no-repeat center center fixed;
  background-color: #312f78;
  background-size: cover;
  .login_form {
    // background: url("@/assets/images/login_form.png") no-repeat;
    // background-color: #2873be;
    // border: 1px solid #666;
    position: absolute;
    width: 700px;
    top: 200px;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
  }
}
</style>
